<script setup lang="ts">

</script>

<template>
  <view class="container bg-white" style="padding:20rpx 0;">
    <view style="padding-bottom: 100rpx;">
      <view class="bg-white">
        <view class="section">
          <!-- store info begin -->
          <view :hover="false">
            <view class="address-box w-100 d-flex align-items-center">
              <view class="d-flex flex-column w-60">
                <view class="w-100 font-size-lg text-color-base text-truncate mb-10">
                  <u--text text="观澜路奶茶店" ></u--text>
                </view>
                <view class="w-100 d-flex align-items-center overflow-hidden">
                  <up-icon name="map" color="#f0ad4e" size="24"></up-icon><view class="text-truncate font-size-sm text-color-assist">{{ '广东省深圳市龙华区观澜二路商铺位' }}</view>
                </view>
              </view>
              <view class="d-flex justify-content-end align-items-center w-40">
                <up-icon name="phone" color="#f0ad4e" size="24"></up-icon>
                <!-- <uni-icon type="paperplane-filled" color="#f0ad4e" size="24"/> -->

              </view>
            </view>
          </view>
          <!-- store info end -->
          <!-- goods begin -->
          <view :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
              <up-cell-group :border="false">
                <up-cell v-for="(good, index) in order.goods" :key="index"
                         @click="goToPackages"
                         :title="good.name || '珍珠奶茶' "
                         isLink

                         center
                         :label="good.property || '标准糖,标准冰'"
                         :border="false"
                >
                  <template #value>

                    <view class="d-flex w-40 align-items-center justify-content-between pl-30">
                      <view class="font-size-base text-color-base">x{{ good.number||1 }}</view>
                      <view class="font-size-base text-color-base font-weight-bold">￥{{ good.price||12.00 }}</view>
                    </view>

                  </template>

                </up-cell>

              </up-cell-group>
            </view>
          </view>
          <!-- goods end -->
        </view>
        <view class="section">
          <!-- payment and amount begin -->

          <up-cell-group :border="false">
            <up-cell
                @click="goToPackages"
                title="支付方式"

                :value="order.pay_mode"
                center
                :border="false"
            ></up-cell>
            <up-cell
                @click="goToPackages"
                title="金额总计"

                :value="'￥'+( order.amount||0)"
                center
                :border="false"
            ></up-cell>
          </up-cell-group>
          <!-- payment and amount end -->
        </view>
        <view class="section">
          <!-- order info begin -->

          <up-cell-group >
            <up-cell
                @click="goToPackages"
                title="下单时间"

                value="2024-12-12 12:12:12"
                center
                :border="false"
            ></up-cell>
            <up-cell
                @click="goToPackages"
                title="下单门店"

                value="教育路店"
                center
                :border="false"
            ></up-cell>
            <up-cell
                @click="goToPackages"
                title="支付方式"

                value="微信支付"
                center
                :border="false"
            ></up-cell>
            <up-cell
                @click="goToPackages"
                title="订单号"

                value="2122212xxxeee2312"
                center
                :border="false"
            ></up-cell>
          </up-cell-group>




          <!-- order info end -->
        </view>
        <!-- order other info begin -->

        <up-cell-group>
          <up-cell
              @click="goToPackages"
              title="取单号"

              value="120"
              center
              :border="false"
          ></up-cell>
          <up-cell
              @click="goToPackages"
              title="享用方式"

              value="自取"
              center
              :border="false"
          ></up-cell>
          <up-cell
              @click="goToPackages"
              title="取餐时间"

              value="立即取餐"
              center
              :border="false"
          ></up-cell><up-cell
            @click="goToPackages"
            title="完成制作时间"

            value="2024-12-12  12:12:12"
            center
            :border="false"
        ></up-cell>
          <up-cell
              @click="goToPackages"
              title="备注"

              value="2024-12-12  12:12:12"
              center
              :border="false"
          ></up-cell>
        </up-cell-group>



        <!-- order other info end -->
      </view>
      <!-- <view class="position-relative w-100">
        <image src="/static/images/order/bottom.png" mode="widthFix" class="w-100"></image>
        <view class="invote-box" v-if="!order.invoice_status">
          <view class="font-size-base text-color-primary" @tap="goToInvoice">去开发票</view>
          <image src="/static/images/order/right.png"></image>
        </view>
      </view> -->
    </view>
    <view class="btn-box">
      <!-- <view class="item" v-if="order.invoice_status > 0"><button type="primary">查看发票</button></view>
      <view class="item"><button type="primary" plain @tap="review">去评价</button></view> -->
      <view class="item"><u-button type="warning">再来一单</u-button></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@mixin arch {
  content: "";
  position: absolute;
  //background-color: $bg-color;
  width: 30rpx;
  height: 30rpx;
  bottom: -15rpx;
  z-index: 10;
  border-radius: 100%;
}

.section {
  position: relative;

  &::before {
    @include arch;
    left: -15rpx;
  }

  &::after {
    @include arch;
    right: -15rpx;
  }
}

.pay-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //font-size: $font-size-base;
  //color: $text-color-base;
  margin-bottom: 40rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

.invote-box {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 30rpx;
    height: 30rpx;
  }
}

.btn-box {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 11;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 10rpx;
    flex: 1;
    flex-shrink: 0;

    button {
      width: 100%;
      border-radius: 50rem !important;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
  }
}

.address-box{
  padding: 0 30rpx;
}
</style>
